<template>
  <div id="packageservicelist">
    <el-row>
      <el-col :span="4">
        <div class="div_border_title">
          <h2>服务项管理</h2>
        </div>
      </el-col>
    </el-row>
    <div class="search-box">
      <el-form inline>
        <el-form-item label="服务类型" prop="service_type_title">
          <el-select v-model="service_type_title" style="width:100%">
            <el-option v-for="(item,index) in service_type_data" :key="index" :label="item.service_type_title"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计费方式" prop="service_type_method">
          <el-select v-model="billing_method_title" style="width:100%">
            <el-option v-for="(item,index) in billing_method_data" :key="index" :label="item.billing_method_name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计费项" prop="service_type_kind">
          <el-select v-model="billing_items_title" style="width:100%">
            <el-option v-for="(item,index) in account_type_data" :key="index" :label="item.billing_items_title"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch" icon="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbar-box">
      <el-button-group>
        <el-button v-for="(toolbar,index) in toolbarList" :key="index" :type="toolbar.type" :icon="toolbar.icon"
                   @click="getButtonType(toolbar.event)">{{toolbar.name}}
        </el-button>
      </el-button-group>
    </div>
    <el-table :data="serviceList" border highlight-current-row fit @row-click="clickRow" @row-dblclick="openDialog">
      <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
      <el-table-column prop="service_type_title" label="服务类型名称" align="center"></el-table-column>
      <el-table-column prop="billing_items_title" label="计费项名称" align="center"></el-table-column>
      <el-table-column prop="user_group" label="计费项用户类型" :formatter="formatterendStatus"
                       align="center"></el-table-column>
      <el-table-column prop="billing_method_type" label="计费方式" :formatter="formatterendMethods" width="100"
                       align="center"></el-table-column>
      <el-table-column prop="original_price" label="原价/元" width="100" align="center"></el-table-column>
      <el-table-column prop="current_price" label="现价/元" width="100" align="center"></el-table-column>
      <el-table-column prop="service_item_description" label="服务项描述" align="center"></el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                   class="table-page-style"></el-pagination>
    <el-dialog title="服务项管理" v-model="isDialog">
      <div class="dialog-content">
        <PackageServiceDialog :Dataid="currentID"
                              :Savetype="serviceType" @returnBack="getDialogState()"></PackageServiceDialog>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { commonNotify } from '../../assets/js/common.js'
  import { postDataToServer } from '../../assets/js/post.js'
  import PackageServiceDialog from '@/components/packageManagement/PackageServiceDialog'
  import { getToolBarList } from '../../assets/js/buildStructure/list.js'

  export default {
    name: 'packageservicelist',
    data () {
      return {
        serviceList: [],
        toolbarList: [],
        service_type_data: [],
        billing_method_data: [],
        account_type_data: [],
        currentID: '',
        currData: {},
        page_no: 1,
        total: 0,
        isDialog: false,
        type: '',
        serviceType: '',
        reservation_type_data: [],
        service_type_title: '',
        billing_method_title: '',
        billing_items_title: '',
        options: [{
          value: '0',
          label: '个人用户'
        }, {
          value: '1',
          label: '企业用户'
        }, {
          value: '2',
          label: '个人和企业'
        }],
      }
    },
    created () {
      this.getServiceType()
      this.getBillingMethod()
      this.getAccountType()
      this.getToolBars()
      this.getServiceDataList(1)
    },
    methods: {
      getServiceType () {
        let _this = this
        let param = new Object()
        postDataToServer('PACKAGE_SERVICE_TYPE_LIST', param).then((data) => {
          _this.service_type_data = data.data_list
        })
      },
      getBillingMethod () {
        let _this = this
        let param = new Object()
        postDataToServer('STALLS_BILLING_METHOD_LIST', param).then((data) => {
          _this.billing_method_data = data.data_list
        })
      },
      getAccountType () {
        let _this = this
        let param = new Object()
        postDataToServer('STALLS_BILLING_ITEMS_LIST', param).then((data) => {
          _this.account_type_data = data.data_list
        })
      },
      clickRow (row, event, column) {
        this.currentID = row.id
        this.currData = row
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      //双击打开dialog
      openDialog (row, event) {
        this.serviceType = 'edit'
        this.currentID = row.id
        this.isDialog = true
      },
      doSearch () {
        let _this = this
        let params = new Object()
        params.page_no = 1
        params.page_size = 20
        if (_this.service_type_title !== '') {
          params.service_type_id = _this.service_type_title
        }
        if (_this.billing_method_title !== '') {
          params.billing_method_id = _this.billing_method_title
        }
        if (_this.billing_items_title !== '') {
          params.billing_items_id = _this.billing_items_title
        }
        postDataToServer('STALLS_SERVICE_ITEM_LIST', params)
          .then(function (data) {
            if (data.status === 0) {
              _this.serviceList = data.data_list
              _this.total = data.total_results
            }
          })
      },
      getServiceDataList (page) {
        let _this = this
        let param = new Object()
        param.page_no = page
        param.page_size = 20
        postDataToServer('STALLS_SERVICE_ITEM_LIST', param).then((data) => {
          if (data.status === 0) {
            _this.serviceList = data.data_list
            _this.total = data.total_results
          }
        })
      },
      //取得功能按钮
      getToolBars () {
        this.toolbarList = getToolBarList('list', 7)
      },
      //根据不同的按钮执行不同的操作
      getButtonType (type) {

        switch (type) {
          case 'add':
            this.serviceType = 'add'
            this.isDialog = true
            break
          case 'edit':
            this.serviceType = 'edit'
            this.edit()
            break
          case 'delete':
            this.delete()
          default:
            break
        }
      },
      //编辑按钮
      edit () {
        if (this.currentID === '' || this.currentID === undefined) {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
        } else {
          this.isDialog = true
        }
      },
      //删除按钮
      delete () {
        if (this.currentID === '' || this.currentID === undefined) {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
          return
        }
        let _this = this
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = new Object()
          param.id = _this.currentID
          postDataToServer('STALLS_SERVICE_ITEM_DEL', param).then(function (data) {
            if (data.status === 0) {
              _this.$message({
                type: 'success',
                message: '删除成功'
              })
              _this.getServiceDataList(1)
            } else {
              _this.$message({
                type: 'warning',
                message: data.message,
              })
            }
          })
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      formatterendStatus (row) {
        return getStaticMapList('user_group', row.user_group)
      },
      formatterendMethods (row) {
        return getStaticMapList('billing_method_type', row.billing_method_type)
      },
      //接受子组件的状态关闭子组件
      getDialogState (state) {
        this.currData = {}
        this.isDialog = state
        this.getServiceDataList(1)
      },
    },
    components: {
      PackageServiceDialog
    },
    watch: {
      page_no (val, oldVal) {
        this.getServiceDataList(val)
      }
    }
  }
</script>

<style scoped>
  #packageservicelist {
    padding: 2em;
  }

  .toolbar-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
    margin-top: 20px;
  }

  /*弹出框样式*/
  .el-dialog {
    background-color: black;
  }
</style>
